<!--
 * @Author: gaotang
 * @Date: 2024年12月27日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2024-12-27 15:35:39
-->
<template>
  <!--  <div class="page-warp">
   车辆页面
  </div> -->
  <div class="contents">
    <div class="mapwrap">
      <ItemWrap v-if="showChat" :style="{ left: offsetX, top: offsetY }" style="height: 470px; width: 400px;;"
        class="dialog" title="园区" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showChat = false; chooseIndex = '10'">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="boxContentDiv" style="margin-left: 10px;">
          <div class="tanDiv" style="margin-left: -10px;">
            <div class="tanTitle"><span>车辆停留时长</span></div>
            <TanTop />
          </div>
          <div class="tanDiv" style="margin-left: -10px; margin-top: 10px;">
            <div class="tanTitle"><span>车籍分布</span></div>
            <TanBottom />
          </div>
        </div>
      </ItemWrap>
    </div>
    <!-- 车辆页面 -->
    <div class="content_left animate__animated animate__fadeInLeft" style="animation-duration: 1s;">
      <div class="pagetab"></div>
      <div class="content_left-three">
        <ItemCar class="content_lr-item" title="临沂进出车次" style="height: 280px" :type="'leftboxbg1'">
          <LeftRightTop />
        </ItemCar>
        <ItemCar class="content_lr-item" title="临沂籍车辆占比" style="height: 280px" :type="'leftboxbg2'">
          <LeftRightCenter />
        </ItemCar>
        <ItemCar class="content_lr-item" title="车辆常跑线路" style="height: 280px" :type="'leftboxbg3'">
          <LeftRightBottom />
        </ItemCar>
      </div>
    </div>
    <div class="content_center animate__animated animate__fadeInUp" style="animation-duration: 1s;">
      <!-- <CenterTopStatic class="content_center_top" /> -->
      <div class="centerDiv">
        <ItemCar class="content_lr-item" title="市场" style="height: 280px">
          <CenterBottomOne />
        </ItemCar>
      </div>
      <div class="centerDiv">
        <ItemCar class="content_lr-item" title="园区" style="height: 280px">
          <CenterBottomTwo @showChatFun="showChatFun" />
        </ItemCar>
      </div>
      <div class="centerDiv">
        <ItemCar class="content_lr-item" title="停车场" style="height: 280px">
          <CenterBottomThree />
        </ItemCar>
      </div>
      <div class="centerDiv">
        <ItemCar class="content_lr-item" title="加油站" style="height: 280px">
          <CenterBottomFour />
        </ItemCar>
      </div>
      <div class="centerDiv">
        <ItemCar class="content_lr-item" title="其他" style="height: 280px">
          <CenterBottomFive />
        </ItemCar>
      </div>

    </div>
    <div class="content_right animate__animated animate__fadeInRight" style="animation-duration: 1s;">
      <div class="content_right-three">
        <ItemCar class="content_lr-item" title="车龄分布" style="height: 280px" :type="'rightboxbg3'">
          <RightLeftBottom />
        </ItemCar>
        <ItemCar class="content_lr-item" title="车辆型号分布" style="height: 280px" :type="'rightboxbg2'">
          <RightLeftCenter />
        </ItemCar>
        <ItemCar class="content_lr-item" title="车辆品牌分布" style="height: 280px" :type="'rightboxbg1'">
          <RightLeftTop />
        </ItemCar>
      </div>
    </div>
  </div>
</template>

<script>
import LeftRightTop from './left-right-top.vue';
import LeftRightCenter from './left-right-center.vue';
import LeftRightBottom from './left-right-bottom.vue';

import CenterTopStatic from './center-top-static.vue';
import CenterBottomOne from './center-bottom-one.vue';
import CenterBottomTwo from './center-bottom-two.vue';
import CenterBottomThree from './center-bottom-three.vue';
import CenterBottomFour from './center-bottom-four.vue';
import CenterBottomFive from './center-bottom-five.vue';

import RightLeftTop from './right-left-top.vue';
import RightLeftCenter from './right-left-center.vue';
import RightLeftBottom from './right-left-bottom.vue';
import MapData from './modal/map-data.vue';


import TanTop from './tan-top.vue';
import TanBottom from './tan-bottom.vue';

export default {
  components: {
    LeftRightTop,
    LeftRightCenter,
    LeftRightBottom,
    CenterTopStatic,
    RightLeftTop,
    RightLeftCenter,
    RightLeftBottom,
    MapData,
    CenterBottomOne,
    CenterBottomTwo,
    CenterBottomThree,
    CenterBottomFour,
    CenterBottomFive,


    TanTop,
    TanBottom
  },
  name: 'CarMain',
  data() {
    return {
      isMapClick: false,
      showChat: false,
      offsetX: '30%',
      offsetY: '40px',
    };
  },
  methods: {
    showChatFun(item) {
      this.showChat = true;
    }
  },
};
</script>

<style lang="scss" scoped>
@import '~animate.css/animate.css';

.page-warp {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 15px;
  z-index: 0;
  width: 100%;
  height: 100%;
  // border: 1px solid red;

  // background: url('../../assets/img/bg3.png') no-repeat center;
  background-position: center center;
  background-size: 100% 100%;
  margin-bottom: 460px;
}

.mapwrap {
  margin-top: -20px;
  margin-bottom: -50px;
  height: 580px;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 0;

  .close {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
  }

  .dialog {
    width: 400px;
    height: 200px;
    position: absolute;
    z-index: 999;
  }

  .tanDiv {
    width: 100%;
    margin: 5px;

    .tanTitle {
      width: calc(100% - 20px);
      height: 24px;
      line-height: 24px;
      background: url('../../assets/img/launch/car/th9.png') no-repeat left center;

      span {
        display: flex;
        margin-left: 38px;
        line-height: 24px;
        color: #D8F0FF;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.contents {
  // position: relative;
  // top: 0;
  padding-left: 200px;
  padding-right: 200px;
  width: calc(100% - 400px);

  .content_left,
  .content_right {
    width: 650px;
    box-sizing: border-box;
    margin-top: -30px;
    margin-bottom: 60px;
    display: flex;
    justify-content: space-around;
    position: relative;
  }

  // 中间
  .content_center {
    width: 2700px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    div.centerDiv {
      width: 520px;
    }

    position: relative;
    top: 560px;
  }

  //左右两侧 三个块
  .content_lr-item {
    // width: 95%;
  }

  .content_center_top {
    width: 100%;
    height: 105px;
  }

  .content_left-one,
  .content_left-two,
  .content_left-three,
  .content_right-one,
  .content_right-two,
  .content_right-three {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    width: 600px;
  }

  // .content_left-one,
  // .content_right-one {
  //   width: 520px;
  // }

  // .content_left-three,
  // .content_right-three {
  //   width: 580px;
  // }
}

@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }

  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }

  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
